import { history } from "umi";
import { useState, useRef, useEffect } from "react";
import bgImage from "@/assets/p2/background3.png";
import "@/pages/p2/gamepage.css";
import Dialog from "@/components/Dialog"; //对话组件
import dialogImage from "@/assets/p1/dialog_background_red.png";
import TreasureBox from "@/components/TreasureBox"; //百宝袋组件
import AchievementList from "@/components/AchievementList"; //成就组件
import Character from "@/components/Character"; //角色组件
import "@/pages/p2/fangcheng.css";
import Dog from "@/components/Dog";
import front1 from "@/assets/p1/front1.png";
import front2 from "@/assets/p1/front2.png";
import front3 from "@/assets/p1/front3.png";
import back1 from "@/assets/p1/back1.PNG";
import back2 from "@/assets/p1/back2.PNG";
import back3 from "@/assets/p1/back3.PNG";
import left1 from "@/assets/p1/left1.png";
import left2 from "@/assets/p1/left2.png";
import left3 from "@/assets/p1/left3.png";
import right1 from "@/assets/p1/right1.png";
import right2 from "@/assets/p1/right2.png";
import right3 from "@/assets/p1/right3.png";

import characterImage from "@/assets/p1/characters/protagonist.png";

const fangcheng = () => {
	const dialog1 = ["恭喜玩家，解锁成就已达八个，还剩一个成就待解锁", ""];
	const [dogRunning, setDogRunning] = useState(false);
	const [dia, setDia] = useState(true); //设置对话消失
	// const dialog2 = ["人齐了，现在这里有一个问题亟待解决，请大家集思广益",
	//     "今有张家去赶集市，卖牛二、羊五，以买十三豕，有余钱一千。卖牛三、豕三，以买九羊，"+
	//     "钱适足。卖羊六、豕八，以买五牛，钱不足六百。问牛、羊、豕各几何"
	// ]
	// const dialog3 = ["夫子：这位学生可真是颖悟绝伦",
	//     "我：夫子可是知道什么",
	//     "夫子：事事皆有定理，相信你已经有所感悟，剩下的需要自己去领悟",
	//     ""
	// ]

	const [characterPosition, setCharacterPosition] = useState({
		x: renX,
		y: renY,
	});
	const characterImages = {
		front: [front1, front2, front3, front2],
		left: [left1, left2, left3, left2],
		right: [right1, right2, right3, right2],
		back: [back1, back2, back3, back2]
	};
	const handlePositionChange = newPosition => {
		setCharacterPosition(newPosition);
	};

	const screenWidth = window.innerWidth;
	const screenHeight = window.innerHeight;

	// 狗动画
	const [dogX, setDogX] = useState(0.6 * screenWidth); //初始狗和人位置
	const [dogY, setDogY] = useState(0.7 * screenHeight);
	const [renX, setRenX] = useState(0.65 * screenWidth);
	const [renY, setRenY] = useState(0.7 * screenHeight);

	let animations = [];
	if (dogRunning) animations.push("running");
	if (!dogRunning)
		animations = animations.filter(animation => animation !== "running");

	const dogRef = useRef();
	const dogStopX = 0.1 * screenWidth;
	const dogStopY = -0.2 * screenHeight;
	// 设置 CSS 变量
	document.documentElement.style.setProperty("--dog-stop-x", `${dogStopX}px`);
	document.documentElement.style.setProperty("--dog-stop-y", `${dogStopY}px`);

	useEffect(() => {
		const { x, y } = characterPosition;
		if (
			y < 0.3 * screenHeight &&
			x < 0.2 * screenWidth
		) {
			history.push("/p2/fangcheng2");
		}
	}, [characterPosition.x, characterPosition.y]);

	const chengjiu = () => {};

	return (
		<div
			className="game-page"
			style={{ backgroundImage: `url(${bgImage})` }}
		>
			<TreasureBox itemId={4} />
			<AchievementList achievementId={9} handleClick={chengjiu} />
			<Dog
				ref={dogRef}
				initialPositionX={dogX}
				initialPositionY={dogY}
				animations={animations}
				visible={true}
			/>
			<Character
				characterImage={characterImage}
				characterImages={characterImages}
				canMove={true}
				initPositionX={renX}
				initPositionY={renY}
				onPositionChange={handlePositionChange}
				ifProtagonist="true"
			/>
			{dia && (
				<Dialog
					backgroundImage={dialogImage}
					dialogues={dialog1}
					triggerIndexEvents={[1]}
					eventHandlers={[
						() => {
							setDia(false);
							setDogRunning(true);
						},
					]}
				></Dialog>
			)}
		</div>
	);
};

export default fangcheng;
